<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数</title>
</head>
<body>
    <!-- 
        目的：更简短的函数写法，并且不绑定this,箭头函数的语法比函数表达式更简洁
        使用场景：箭头函数使用于哪些本来需要匿名函数的地方
        箭头函数如果想返回箭头函数 可以直接返回一个对象
            const fn = (uname) => ({uname:uname})
     -->


     <!-- 
        箭头函数的参数
        普通函数有arguments动态参数
        箭头函数没有arguments动态参数，但是有剩余参数 ...args
      -->


      <!--
        箭头函数的this 
        在箭头函数出现之前，每一个新函数根据它是如何来定义这个函数的this值，非常不友好
        箭头函数不会自己创建自己的this，它只能从自己的作用域链上一层沿用this 

        箭头函数的this 是上一层作用域的this指向
        
     -->
    <script>
        // 箭头函数的this 是上一层作用域的this指向
        const fn = ()=>{
            console.log(this); //window
        }
        fn()

        // 对象方法箭头函数 this
        const obj = {
            uname:'hello',
            sayHi:()=>{
                console.log(this); // window 
            }
        }
        obj.sayHi()
        // sayHi 里面是没有this的，window调用了obj的，他的this就是window，在声明时就被绑定了

        console.log("================");
        const o = {
         a : function(){
            say=()=>{
                console.log(this);
            }
            say()
            }
        }
        o.a()  // this指向 o 这个对象
    </script>
</body>
</html>
